<!--店铺管理-->
<script setup lang="ts">
  import {AxiosPromise} from "axios";
  import lodash from 'lodash-es'
  const userStore = useUserStore();
  const settingsStore = useSettingsStore();

  defineOptions({
    name: "auditDetail",
    inheritAttrs: false,
  });

  import { ElLoading } from "element-plus";
  import 'element-plus/theme-chalk/el-loading.css'
  import {getAuditVO, getOrderDetail, getBillDetail, getAuditList, getDoneAuditOrderDetail, getDoneAuditBillDetail, getFileAuditOrderDetail, getFileAuditBillDetail} from "@/api/audit";
  import {listAll} from "@/api/loss";
  import {saveCheckIn, listCheckIn, reject, confirmCheckIn} from "@/api/auditCheckIn";
  import {getDoneAuditVO} from "@/api/doneAudit";
  import {getFileAuditDetail} from "@/api/fileAudit";
  import {getByOrderNo} from "@/api/clientRegister";

  import { AuditVO } from "@/api/audit/types";
  import { AuditCheckInForm } from "@/api/auditCheckIn/types";
  import { LossForm } from "@/api/loss/types";
  import {useUserStore} from "@/store/modules/user";
  import {useRouter} from "vue-router";
  import {AccessoryList} from "@/api/accessory/types";
  import {findAll} from "@/api/accessory";
  import {useSettingsStore} from "@/store/modules/settings";

  const loading = ref(false);
  const auditDetail = reactive<AuditVO>({});
  const formData = reactive<AuditCheckInForm>({});
  const managerFormData = reactive<AuditCheckInForm>({});
  const lossList = ref<LossForm[]>();
  const selectLossList = ref<LossForm[]>();
  const orderList = ref<[]>([]);
  const sourceOrderList = ref<[]>([]);
  const billList = ref<[]>([]);
  const sourceBillList = ref<[]>([]);
  const historyList = ref<any[]>();
  const auditList = ref<[]>();
  const goType = ref<number>();
  const id = ref<number>();
  const linkNo = ref<string>();
  const billMonth = ref<string>();
  const router = useRouter();
  const auditCheckForm = ref(ElForm);
  const buttonDisabled = ref(false)
  const receiveAmount = ref(0)
  const returnAmount = ref(0)
  const depositAmount = ref(0)

  const accessoryList = reactive<AccessoryList>({
	  value: []
  });

  const clientRegisterList = ref<[]>([])
  const rules = reactive({});
  const billKeyword = ref('')
  const orderKeyword = ref('')

  function getAuditDetail(id: any, goType: any) {
    if (goType === 0) {
      getAuditVO(id).then(({data}) => {
        Object.assign(auditDetail, data);
        if (auditDetail.orderNo !== undefined) {
          getCheckInHistory(auditDetail.orderNo)
        }
      });
    }else if(goType === 1){
      getDoneAuditVO(id).then(({data}) => {
        Object.assign(auditDetail, data);
        if (auditDetail.orderNo !== undefined) {
          getCheckInHistory(auditDetail.orderNo)
        }
      });
    }else if(goType === 2) {
      getFileAuditDetail(id, billMonth.value).then(({data}) => {
        Object.assign(auditDetail, data);
        if (auditDetail.orderNo !== undefined) {
          getCheckInHistory(auditDetail.orderNo)
        }
      });
    }
  }

  /**
   * 获取损失细类细则
   */
  function getAllLoss() {
    listAll()
      .then((response) => {
        lossList.value = response.data;
      })
      .finally(() => {
      });
  }

  /**
   * 改变损失原因
   * @param detail
   */
  function changeLoss(lossCode: string) {
    selectLossList.value = lodash.filter(lossList.value, ['lossCode', lossCode])
    formData.lossDetailName = ''
    formData.roleName = ''
    formData.roleId = undefined
    formData.orderStatusName = ''
  }

  /**
   * 改变损失原因细则
   * @param detail
   */
  function changeLossDetail(detailCode: any) {
    const filterLoss = lodash.filter(lossList.value, ['detailCode', detailCode])
    if (filterLoss.length > 0) {
      formData.roleName = filterLoss[0].roleName
      formData.roleId = filterLoss[0].roleId
      formData.roleCode = filterLoss[0].roleCode
      formData.orderStatusName = filterLoss[0].orderStatusName
    }
  }

  /**
   * 是否自认损失事件
   * @param ownerLossValue
   */
  function changeOwnerLoss() {
    if (formData.roleCode !== undefined && !userStore.roles.includes(formData.roleCode)) {
      formData.ownerLossValue = false
      ElMessage.warning("责任方与您的角色身份不同，不能自认损失");
      return
    }
    // formData.recoverMoney = auditDetail.receiveBillAmount
  }

  /**
   * 核销登记确认事件
   */
  function confirmHandle() {
	  managerFormData.ownerLoss = managerFormData.ownerLossValue ? 1 : undefined
	  managerFormData.orderNo = auditDetail.orderNo
	  managerFormData.ownerLossMoney = auditDetail.receiveBillAmount
    auditCheckForm.value.validate((isValid: boolean) => {
      if (isValid) {
				const importLoading = ElLoading.service({
					lock: true,
					text: '请稍等...',
					background: 'rgba(0, 0, 0, 0.7)',
				})
        confirmCheckIn(managerFormData)
                .then(() => {
                  ElMessage.success("保存成功");
                  buttonDisabled.value = true
                  if (auditDetail.orderNo !== undefined) {
                    getCheckInHistory(auditDetail.orderNo)
                  }
                }).finally(() => {
						importLoading.close()
				})
      }
    });
  }

  /**
   * 核销登记确认事件
   */
  function saveHandle() {
    saveCheckInApi()
  }

  /**
   * 核销登记拒绝事件
   */
  function rejectHandle() {
	  managerFormData.ownerLoss = managerFormData.ownerLossValue ? 1 : undefined
	  managerFormData.orderNo = auditDetail.orderNo
    auditCheckForm.value.validate((isValid: boolean) => {
      if (isValid) {
				const importLoading = ElLoading.service({
					lock: true,
					text: '请稍等...',
					background: 'rgba(0, 0, 0, 0.7)',
				})
        reject(managerFormData)
                .then(() => {
                  ElMessage.success("保存成功");
                  buttonDisabled.value = true
                  if (auditDetail.orderNo !== undefined) {
                    getCheckInHistory(auditDetail.orderNo)
                  }
                }).finally(() => {
					importLoading.close()
				})
      }
    });
  }

  function saveCheckInApi() {
    formData.ownerLoss = formData.ownerLossValue ? 1 : undefined
    formData.orderNo = auditDetail.orderNo
    formData.ownerLossMoney = auditDetail.receiveBillAmount
    auditCheckForm.value.validate((isValid: boolean) => {
      if (isValid) {
				const importLoading = ElLoading.service({
					lock: true,
					text: '请稍等...',
					background: 'rgba(0, 0, 0, 0.7)',
				})
        saveCheckIn(formData)
                .then(() => {
                  ElMessage.success("保存成功");
                  buttonDisabled.value = true
                  if (auditDetail.orderNo !== undefined) {
                    getCheckInHistory(auditDetail.orderNo)
                  }
                }).finally(() => {
						importLoading.close()
				})
      }
    });
  }

  /**
   * 返回
   */
  function back() {
    router.push({
      name: 'Audit',
    })
  }

  /**
   * 获取核销记录
   * @param orderNo
   */
  function getCheckInHistory(orderNo: string) {
    listCheckIn(orderNo).then(response => {
      historyList.value = response.data
      if (historyList.value !== undefined && historyList.value.length > 0) {
          let head = lodash.head(historyList.value)
          changeLoss(head.lossReason)
					//
          Object.assign(managerFormData, head);
					const filterLoss = lodash.filter(lossList.value, ['detailCode', managerFormData.lossDetailName])
					if (filterLoss.length > 0) {
						managerFormData.roleName = filterLoss[0].roleName
						managerFormData.roleId = filterLoss[0].roleId
						managerFormData.roleCode = filterLoss[0].roleCode
						managerFormData.orderStatusName = filterLoss[0].orderStatusName
					}
					managerFormData.ownerLossValue = managerFormData.ownerLoss === 1
      }
    })
  }

  /**
   * 获取订单列表
   * @param auditId
   */
  function getOrderList(linkNo: string, queryList: any) {
	  // goType 跳转类型（0：待审核，1：个人已办未归档、个人已归档，2：归档核销表）
	  if (goType.value === 0) {
			getOrderDetail(linkNo).then(( data ) => {
				orderList.value = data.data
		  	sourceOrderList.value = data.data
				if (orderList.value !== undefined) {
					for (let data of orderList.value) {
						queryList.push({'linkNo': data['linkNo']})
					}
				}
				getAuditListHandle(queryList)
			})
		}else if (goType.value === 1){
			getDoneAuditOrderDetail(id.value).then(( data ) => {
				orderList.value = data.data
		  	sourceOrderList.value = data.data
				if (orderList.value !== undefined) {
					for (let data of orderList.value) {
						queryList.push({'linkNo': data['linkNo']})
					}
				}
				getAuditListHandle(queryList)
			})
		}else if (goType.value === 2){
			getFileAuditOrderDetail(linkNo, id.value).then(( data ) => {
				orderList.value = data.data
		  	sourceOrderList.value = data.data
				if (orderList.value !== undefined) {
					for (let data of orderList.value) {
						queryList.push({'linkNo': data['linkNo']})
					}
				}
				getAuditListHandle(queryList)
			})
		}
  }

  /**
   * 获取账单列表
   * @param auditId
   */
  function getBillList(linkNo: any) {
	  // goType 跳转类型（0：待审核，1：个人已办未归档、个人已归档，2：归档核销表）
	  if (goType.value === 0) {
			getBillDetail(linkNo).then(( data ) => {
				sourceBillList.value = data.data
				// 过滤掉【稽核标识】为【不参与】的数据
				let filterBillList = lodash.filter(data.data, (item: any) => item.audit !== null && item.audit === '参与')
				billList.value = filterBillList
		  	summaryAmount(billList.value)
				let queryList = []
				if (billList.value !== undefined) {
					for (let data of billList.value) {
						queryList.push({'linkNo': data['linkNo']})
					}
				}
				getOrderList(linkNo, queryList)
			})
	  } else if (goType.value === 1) {
			getDoneAuditBillDetail(id.value).then(( data ) => {
				sourceBillList.value = data.data
				// 过滤掉【稽核标识】为【不参与】的数据
				// let filterBillList = lodash.filter(data.data, ['audit', '参与'])
				billList.value = data.data
		  	summaryAmount(billList.value)
				let queryList = []
				if (billList.value !== undefined) {
					for (let data of billList.value) {
						queryList.push({'linkNo': data['linkNo']})
					}
				}
				getOrderList(linkNo, queryList)
			})
	  } else if (goType.value === 2) {
			getFileAuditBillDetail(linkNo, id.value).then(( data ) => {
				sourceBillList.value = data.data
				// 过滤掉【稽核标识】为【不参与】的数据
				// let filterBillList = lodash.filter(data.data, ['audit', '参与'])
				billList.value = data.data
		  	summaryAmount(billList.value)
				let queryList = []
				if (billList.value !== undefined) {
					for (let data of billList.value) {
						queryList.push({'linkNo': data['linkNo']})
					}
				}
				getOrderList(linkNo, queryList)
			})
	  }
  }

  // 统计收款金额、退款金额、保证金退款金额
  function summaryAmount(billDataList) {
	  depositAmount.value = parseFloat(lodash.sum(lodash.map(lodash.filter(billDataList, (item: any) => item.originalBillProject === '保证金退款'), 'billAmount'))).toFixed(2)
	  receiveAmount.value = parseFloat(lodash.sum(lodash.map(lodash.filter(billDataList, (item: any) => item.originalBillProject === '收款金额'), 'billAmount'))).toFixed(2)
	  returnAmount.value = parseFloat(lodash.sum(lodash.map(lodash.filter(billDataList, (item: any) => item.originalBillProject === '退款金额'), 'billAmount'))).toFixed(2)
	}

  /**
   * 获取账单列表
   * @param auditId
   */
  function getAuditListHandle(queryList: any) {
    getAuditList(queryList).then(( response ) => {
      auditList.value = response.data
    })
  }

  /**
	 * 获取所有辅助项
   */
  function getAllAccessory(){
	  accessoryList.value = []
	  findAll().then((response) => {
		  if (response.data !== null && response.data.length > 0) {
			  const head = lodash.head(response.data)
			  for (const key of Object.keys(head)) {
				  if (key.includes('Name') && lodash.get(head, key) !== null && lodash.get(head, key) !== undefined && lodash.get(head, key) !== '') {
					  accessoryList.value.push(lodash.get(head, key))
				  }
			  }
		  }
	  })
  }

  // 账单列表文本搜索
  function changeBillKeyword(value: string) {
	  if (value) {
			const filterBill = lodash.filter(sourceBillList.value, (bill: any) => JSON.stringify(bill).includes(value))
			billList.value = filterBill
  	}else{
			billList.value = lodash.cloneDeep(sourceBillList.value)
		}
	}

  // 订单列表文本搜索
  function changeOrderKeyword(value: string) {
	  if (value) {
			const filterOrder = lodash.filter(sourceOrderList.value, (order: any) => JSON.stringify(order).includes(value))
			orderList.value = filterOrder
  	}else{
			orderList.value = lodash.cloneDeep(sourceOrderList.value)
		}
	}

	// 追回款项金额事件
	function changeRecoverMoney(recoverMoney: any) {
	  	if (!recoverMoney) {
		  	formData.payoutsDate = ''
		  	formData.payoutsNo = ''
			}
	}

	function handleGetByOrderNo() {
		getByOrderNo(linkNo.value).then((response) => {
		  	clientRegisterList.value = response.data
		})
	}

  onMounted(() => {
			if (history.state.id === undefined) {
				const auditDetailParam = settingsStore.auditDetailParam
				if (auditDetailParam === 'auditDetailParam') {
					back()
				}
				const auditDetailParamJson = JSON.parse(auditDetailParam)
				id.value = lodash.get(auditDetailParamJson, 'id')
				linkNo.value = lodash.get(auditDetailParamJson, 'linkNo')
		 		 // goType 跳转类型（0：待审核，1：个人已办未归档、个人已归档，2：归档核销表）
				goType.value = lodash.get(auditDetailParamJson, 'goType')
				billMonth.value = lodash.get(auditDetailParamJson, 'billMonth')
			}else{
				id.value = history.state.id
				linkNo.value = history.state.linkNo
				goType.value = history.state.goType
				billMonth.value = history.state.billMonth
			}
	  	settingsStore.changeSetting({ key: "auditDetailParam", value: JSON.stringify({'id': id.value, 'linkNo': linkNo.value, 'goType': goType.value, 'billMonth': billMonth.value}) });
			getAuditDetail(id.value, goType.value)
      getAllLoss()
      getBillList(linkNo.value)
			getAllAccessory()
	  	handleGetByOrderNo()
  });
</script>

<template>
  <div class="app-container">
<!--    核销单详情-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>核销单详情</span>
<!--          <div style="float:right"><el-button type="primary" @click="back">返 回</el-button></div>-->
        </div>
      </template>
      <el-form label-width="140px">
        <el-row :gutter="20">
          <el-col :lg="6" :xs="20">
            <el-form-item label="原始单据ID：">
								<span class="bold-text">{{auditDetail.linkNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="电商平台店铺名称：">
								<span class="bold-text">{{auditDetail.thirdSourceName}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="入账主体：">
								<span class="bold-text">{{auditDetail.receiveCompanyName}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="核销结果分类：">
								<span class="bold-text">{{auditDetail.mainTypeName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="6" :xs="20">
            <el-form-item label="内部系统店铺名称：">
								<span class="bold-text">{{auditDetail.innerShopName}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="核销状态：">
								<span class="bold-text">{{auditDetail.auditStatus}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="财务系统店铺名称：">
								<span class="bold-text">{{auditDetail.billSysStoreName}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="业务日期：">
								<span class="bold-text">{{auditDetail.businessDate}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="6" :xs="20">
            <el-form-item label="财务调账数量：">
								<span class="bold-text">{{auditDetail.reconciliationQty}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="发退货日期：">
								<span class="bold-text">{{auditDetail.sendReturnTime}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="财务调账金额：">
								<span class="bold-text">{{auditDetail.reconciliationAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="20">
            <el-form-item label="应收账款余额：">
              <span :class="auditDetail.receiveBillAmount !== 0 ? 'red bold-text' : ''">{{auditDetail.receiveBillAmount}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
<!--    核销登记-->
    <el-card class="box-card" style="margin-top:10px" v-if="goType === 0 && auditDetail.manager === 0 && !buttonDisabled && (userStore.isRoot || lodash.indexOf(userStore.roles, auditDetail.roleCode) >= 0)">
      <template #header>
        <div class="card-header">
          <span>核销登记</span>
        </div>
      </template>
      <el-form ref="auditCheckForm" :model="formData" :rules="rules" label-width="190px">
        <el-row :gutter="20">
          <el-col :lg="8" :xs="20">
            <el-form-item label="损失原因：" prop="lossReason">
              <dictionary v-model="formData.lossReason" type-code="loss" @change="changeLoss"/>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="20">
            <el-form-item label="损失原因细则名称：" prop="lossDetailName">
              <el-select
                v-model="formData.lossDetailName"
                placeholder=""
                clearable
                @change="changeLossDetail"
								class="yz-el-select"
              >
                <el-option
                        v-for="item in selectLossList"
                        :key="item.detailCode"
                        :label="item.detailName"
                        :value="item.detailCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="20">
            <el-form-item label="责任方：" prop="roleName" placeholder="请选择损失原因细则名称">
              <el-input
                      v-model="formData.roleName"
                      readonly
                      style="width: 200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="8" :xs="20">
            <el-form-item label="责任方跟进结果：" prop="followResult">
              <el-input
                      v-model="formData.followResult"
                      clearable
                      type="textarea"
                      style="width: 200px"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="20">
            <el-form-item label="是否自认损失：" prop="ownerLossValue">
              <el-checkbox style="margin-top: -3px;" v-model="formData.ownerLossValue" label="是" size="large" @change="changeOwnerLoss"/>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="20">
            <el-form-item label="盘盈单号：" prop="pyNo">
              <el-input
                      v-model="formData.pyNo"
                      clearable
                      style="width: 200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="8" :xs="20">
						<el-form-item label="追回款项金额：" prop="recoverMoney">
							<el-input-number
									v-model="formData.recoverMoney"
				  				:precision="2" :step="1"
									style="width: 200px"
									@input="changeRecoverMoney"
							/>
						</el-form-item>
          </el-col>
          <el-col :lg="8" :xs="20">
            <el-form-item label="打款时间：" prop="payoutsDate">
              <el-date-picker
                      v-model="formData.payoutsDate"
                      type="datetime"
                      style="width: 200px"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :editable="false"
                      :clearable="true"
											:disabled="formData.recoverMoney === undefined || formData.recoverMoney === null ||
											(formData.recoverMoney+'').length === 0"
                      placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="20">
            <el-form-item label="收款交易号：" prop="payoutsNo">
              <el-input
                v-model="formData.payoutsNo"
                clearable
								:disabled="formData.recoverMoney === undefined || formData.recoverMoney === null ||
															(formData.recoverMoney+'').length === 0"
                style="width: 200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="8" :xs="20">

          </el-col>
          <el-col :lg="8" :xs="20">

          </el-col>
        </el-row>
      </el-form>
      <div style="float: right;margin-bottom: 10px;">
        <el-popconfirm title="是否确认?" @confirm="saveHandle">
					<!--判断核销单的 manager==1，等于1显示【通过】【拒绝】按钮；等于0显示【确认】按钮-->
          <template  #reference>
            <el-button v-if="!buttonDisabled" type="primary">确 认</el-button>
          </template>
        </el-popconfirm>
      </div>
    </el-card>
<!--    负责人审核-->
	  <el-card class="box-card" style="margin-top:10px" v-if="goType === 0 && auditDetail.manager === 1 && userStore.manager === 1 && !buttonDisabled && (userStore.isRoot || lodash.indexOf(userStore.roles, auditDetail.roleCode) >= 0)">
		  <template #header>
			  <div class="card-header">
				  <span>负责人审核</span>
			  </div>
		  </template>
		  <el-form ref="auditCheckForm" :model="managerFormData" :rules="rules" label-width="190px">
			  <el-row :gutter="20">
				  <el-col :lg="8" :xs="20">
					  <el-form-item label="责任方跟进结果：" prop="followResult">
						  {{managerFormData.followResult}}
					  </el-form-item>
				  </el-col>
				  <el-col :lg="8" :xs="20">
						<el-form-item label="盘盈单号：" prop="pyNo">
							{{managerFormData.pyNo}}
						</el-form-item>
				  </el-col>
				  <el-col :lg="8" :xs="20">
						<el-form-item label="追回款项金额：" prop="recoverMoney">
							{{managerFormData.recoverMoney}}
						</el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="20">
				  <el-col :lg="8" :xs="20">
						<el-form-item label="打款时间：" prop="payoutsDate">
							{{managerFormData.payoutsDate}}
						</el-form-item>
				  </el-col>
				  <el-col :lg="8" :xs="20">
						<el-form-item label="收款交易号：" prop="payoutsNo">
							{{managerFormData.payoutsNo}}
						</el-form-item>
				  </el-col>
				  <el-col :lg="8" :xs="20">
						<el-form-item label="责任方负责人审核备注：" prop="managerRemark">
							<el-input
									v-model="managerFormData.managerRemark"
									clearable
									type="textarea"
									style="width: 200px"
							/>
						</el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="20">
				  <el-col :lg="8" :xs="20">

				  </el-col>
				  <el-col :lg="8" :xs="20">

				  </el-col>
			  </el-row>
		  </el-form>
		  <div style="float: right;margin-bottom: 10px;">
			  <!--判断核销单的 manager==1，等于1显示【通过】【拒绝】按钮；等于0显示【确认】按钮-->
			  <el-popconfirm title="是否通过?" @confirm="confirmHandle">
				  <template  #reference>
					  <el-button v-if="!buttonDisabled" type="primary">通 过</el-button>
				  </template>
			  </el-popconfirm>
			  <el-popconfirm title="是否拒绝?" @confirm="rejectHandle">
				  <template  #reference>
					  <el-button v-if="!buttonDisabled">拒 绝</el-button>
				  </template>
			  </el-popconfirm>
		  </div>
	  </el-card>
<!--    核销记录-->
    <el-card class="box-card" style="margin-top:10px">
      <template #header>
        <div class="card-header">
          <span>核销记录</span>
        </div>
      </template>
			<el-timeline>
				<el-timeline-item v-for="(history,index) in historyList" :key="index" :timestamp="history.createTime" placement="top" color="#f5222d">
					<el-card v-if="history.checkInType === 1">
						<el-row :gutter="20">
							<el-col :lg="6" :xs="20">
								<el-form-item label="类型：">
									财务调账
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="操作人：">
									{{history.checkUserName}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="财务调账金额：">
									{{history.reconciliationAmount}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
							</el-col>
						</el-row>
					</el-card>
					<el-card v-if="history.checkInType === 0">
						<el-row :gutter="20">
							<el-col :lg="6" :xs="20">
								<el-form-item label="责任部门核实人：">
									{{history.checkUserName}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="损失原因：">
									{{history.lossReasonName}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="损失原因细则名称：">
									{{history.lossDetailText}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="责任方：">
									{{history.roleName}}
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :lg="6" :xs="20">
								<el-form-item label="责任方跟进结果：">
									{{history.followResult}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="是否自认损失：">
									{{history.ownerLossName}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="自认损失金额：">
									{{history.ownerLossMoney}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="责任方负责人审核备注：">
									{{history.managerRemark}}
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :lg="6" :xs="20">
								<el-form-item label="收款交易号：">
									{{history.payoutsNo}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="追回款项余额：">
									{{history.recoverMoney}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">
								<el-form-item label="盘盈单号：">
									{{history.pyNo}}
								</el-form-item>
							</el-col>
							<el-col :lg="6" :xs="20">

							</el-col>
						</el-row>
					</el-card>
				</el-timeline-item>
			</el-timeline>
    </el-card>
<!--    账单列表-->
    <el-card class="box-card" style="margin-top:10px">
      <template #header>
        <div class="card-header">
						<span>参与核销的账单列表 总数 <span class="bold-text">{{billList.length}}</span> 条 （收款金额 <span class="bold-text">{{receiveAmount}}</span> 元，退款金额 <span class="bold-text">{{returnAmount}}</span> 元，保证金退款 <span class="bold-text">{{depositAmount}}</span> 元）</span>
					<el-input style="float: right;width: 200px;" v-model="billKeyword" placeholder="输入关键字搜索" @input="changeBillKeyword" clearable></el-input>
        </div>
      </template>
      <el-table
              v-loading="loading"
              highlight-current-row
							:header-row-style="{color: 'dimgray'}"
							size="small"
              :data="billList"
			  			:height="billList && billList.length ? 280 : 200"
              border
      >
				<el-table-column
						label="对账系统平台名称"
						width="150"
						align="center" show-overflow-tooltip
						prop="billSystemPlatformName"
				/>
				<el-table-column
						label="电商平台店铺名称"
						width="200"
						align="center" show-overflow-tooltip
						prop="commercePlatformStoreName"
				/>
				<el-table-column
						label="会计期间"
						align="center" show-overflow-tooltip
						prop="sysBillDate"
						width="140"
				/>
				<el-table-column
						label="稽核标识"
						align="center" show-overflow-tooltip
						prop="audit"
						width="80"
				/>
				<el-table-column
						label="结算单类型"
						align="center" show-overflow-tooltip
						prop="settlementType"
						width="160"
				/>
				<el-table-column
						label="记账状态"
						align="center" show-overflow-tooltip
						prop="status"
						width="80"
				/>
				<el-table-column
						label="原始账单ID"
						align="center" show-overflow-tooltip
						prop="linkNo"
						width="180"
				/>
				<el-table-column
						label="出账日期"
						align="center" show-overflow-tooltip
						prop="billDate"
						width="140"
				/>
				<el-table-column
						label="电商平台账单项目"
						align="center" show-overflow-tooltip
						prop="originalBillProject"
				/>
				<el-table-column
						label="发生方借贷方向"
						align="center" show-overflow-tooltip
						prop="borrowing"
						width="150"
				/>
				<el-table-column
						label="账单金额"
						align="center" show-overflow-tooltip
						prop="billAmount"
						width="150"
				>
						<template #default="scope">
								{{scope.row.billAmount === 0 ? '' : scope.row.billAmount}}
						</template>
				</el-table-column>
      </el-table>
    </el-card>
    <!--订单列表-->
    <el-card class="box-card" style="margin-top:10px">
      <template #header>
        <div class="card-header">
						<span>订单明细列表 总数 <span class="bold-text">{{orderList.length}}</span> 条</span>
					<el-input style="float: right;width: 200px;" v-model="orderKeyword" placeholder="输入关键字搜索" @input="changeOrderKeyword" clearable></el-input>
        </div>
      </template>
      <el-table
              v-loading="loading"
			  			:header-row-style="{color: 'dimgray'}"
							size="small"
              highlight-current-row
              :data="orderList"
							:height="orderList && orderList.length ? 250 : 200"
              border
      >
				<el-table-column
						label="OMS单号"
						align="center" show-overflow-tooltip
						prop="omsNo"
						width="150"
				/>
				<el-table-column
						label="店铺名称"
						width="150"
						align="center" show-overflow-tooltip
						prop="storeName"
				/>
				<el-table-column
						label="发退货时间"
						width="180"
						align="center" show-overflow-tooltip
						prop="opTime"
				/>
				<el-table-column
						label="下单时间"
						width="140"
						align="center" show-overflow-tooltip
						prop="buyTime"
				/>

				<el-table-column
						label="原始主订单号"
						width="150"
						align="center" show-overflow-tooltip
						prop="sourceMainNo"
				/>
				<el-table-column
						label="原始子订单号"
						align="center" show-overflow-tooltip
						prop="sourceSubNo"
						width="150"
				/>
				<el-table-column
						label="PO单号"
						align="center" show-overflow-tooltip
						prop="poNo"
						width="140"
				/>
				<el-table-column
						label="商品单价"
						align="center" show-overflow-tooltip
						prop="price"
						width="100"
				/>
				<el-table-column
						label="发货数量"
						align="center" show-overflow-tooltip
						prop="qty"
						width="100"
				/>
				<el-table-column
						label="发货金额"
						align="center" show-overflow-tooltip
						prop="sendAmount"
						width="120"
				/>
				<el-table-column
						label="退货数量"
						align="center" show-overflow-tooltip
						prop="returnQty"
						width="100"
				/>
				<el-table-column
						label="退货金额"
						align="center" show-overflow-tooltip
						prop="returnAmount"
						width="120"
				/>
				<el-table-column
						label="品牌"
						align="center" show-overflow-tooltip
						prop="brand"
						width="100"
				/>
				<el-table-column
						label="SKU"
						align="center" show-overflow-tooltip
						prop="sku"
						width="120"
				/>
				<el-table-column
						label="商品名称"
						align="center" show-overflow-tooltip
						prop="productName"
						width="150"
				/>
				<el-table-column
						label="订单状态"
						align="center" show-overflow-tooltip
						prop="orderStatus"
						width="100"
				/>
				<el-table-column label="会员" prop="member" width="100" show-overflow-tooltip/>
				<el-table-column label="配货状态" prop="distributeStatus" width="100" show-overflow-tooltip/>
				<el-table-column label="支付方式" prop="payType" width="100" show-overflow-tooltip/>
				<el-table-column label="支付状态" prop="payStatus" width="100" show-overflow-tooltip/>
				<el-table-column label="发货仓库" prop="sendWarehouse" width="100" show-overflow-tooltip/>
				<el-table-column label="收货人" prop="receiver" width="100" show-overflow-tooltip/>
				<el-table-column label="收货人手机" prop="receiverPhone" width="100" show-overflow-tooltip/>
				<el-table-column label="收货人电话" prop="receiverMobile" width="100" show-overflow-tooltip/>
				<el-table-column label="收货人地址" prop="receiverAddress" width="100" show-overflow-tooltip/>
				<el-table-column label="省份" prop="province" width="100" show-overflow-tooltip/>
				<el-table-column label="市" prop="city" width="100" show-overflow-tooltip/>
				<el-table-column label="区" prop="area" width="100" show-overflow-tooltip/>
				<el-table-column label="买家姓名" prop="buyName" width="100" show-overflow-tooltip/>
				<el-table-column label="配送方式" prop="distributeType" width="100" show-overflow-tooltip/>
				<el-table-column label="定金付款时间" prop="depositPayTime" width="100" show-overflow-tooltip/>
				<el-table-column label="订单转入时间" prop="inTime" width="100" show-overflow-tooltip/>
				<el-table-column label="订单确认时间" prop="confirmTime" width="100" show-overflow-tooltip/>
				<el-table-column label="通知配货时间" prop="noticeTime" width="100" show-overflow-tooltip/>
				<el-table-column label="配货时间" prop="distributeTime" width="100" show-overflow-tooltip/>
				<el-table-column label="出库时间" prop="outTime" width="100" show-overflow-tooltip/>
				<el-table-column label="挂起人" prop="suspend" width="100" show-overflow-tooltip/>
				<el-table-column label="客户留言" prop="customerMessage" width="100" show-overflow-tooltip/>
				<el-table-column label="商家备注" prop="sellerRemark" width="100" show-overflow-tooltip/>
				<el-table-column label="订单备注" prop="orderRemark" width="100" show-overflow-tooltip/>
				<el-table-column label="预分配缺货数量" prop="preDistributeQty" width="110" show-overflow-tooltip/>
				<el-table-column label="平台规格" prop="spec" width="100" show-overflow-tooltip/>
				<el-table-column label="预计发货时间" prop="preSendTime" width="100" show-overflow-tooltip/>
				<el-table-column label="物流单号" prop="deliveryNo" width="100" show-overflow-tooltip/>
				<el-table-column label="商品金额" prop="goodsAmount" width="100" show-overflow-tooltip/>
				<el-table-column label="商品标记" prop="goodsTag" width="100" show-overflow-tooltip/>
				<el-table-column label="平台商品名称" prop="goodsName" width="100" show-overflow-tooltip/>
				<el-table-column label="平台商品ID" prop="goodsId" width="100" show-overflow-tooltip/>
				<el-table-column label="WMS订单号" prop="wmsOrderNo" width="100" show-overflow-tooltip/>
				<el-table-column label="实际支付金额（去除平台优惠）" prop="actPayAmount" width="120" show-overflow-tooltip/>
				<el-table-column label="网店优惠信息" prop="preferInfo" width="100" show-overflow-tooltip/>
				<el-table-column label="WMS推送单号" prop="wmsPushNo" width="100" show-overflow-tooltip/>
      </el-table>
    </el-card>
<!--    历史关联核销单-->
    <el-card class="box-card" style="margin-top:10px">
      <template #header>
        <div class="card-header">
          <span>历史关联核销单</span>
        </div>
      </template>
      <el-table
              :data="auditList"
			  			:header-row-style="{color: 'dimgray'}"
							size="small"
			  			:height="auditList && auditList.length ? 280 : 200"
              border>
		  <el-table-column
				  label="原始单据ID"
				  align="center" show-overflow-tooltip
				  width="180"
					prop="linkNo"
		  />
		  <el-table-column
				  label="内部系统店铺名称"
				  align="center" show-overflow-tooltip
				  prop="shopName"
				  width="80"
		  />
		  <el-table-column
				  label="财务系统店铺名称"
				  align="center" show-overflow-tooltip
				  prop="billSysStoreName"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="电商平台店铺名称"
				  align="center" show-overflow-tooltip
				  prop="thirdSourceName"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="业务日期"
				  align="center" show-overflow-tooltip
				  prop="businessDate"
				  width="140"
		  />

		  <el-table-column
				  label="应收账款余额"
				  align="center" show-overflow-tooltip
				  prop="receiveBillAmount"
				  width="80"
		  />
		  <el-table-column
				  label="发货金额"
				  align="center" show-overflow-tooltip
				  prop="sendAmount"
				  width="80"
		  />
		  <el-table-column
				  label="退货金额"
				  align="center" show-overflow-tooltip
				  width="80"
		  >
			  <template #default="scope">{{scope.row.returnAmount === 0 ? '' : scope.row.returnAmount}}</template>
		  </el-table-column>
		  <el-table-column
				  label="收款金额"
				  align="center" show-overflow-tooltip
				  prop="receiveAmount"
				  width="80"
		  />
		  <el-table-column
				  label="退款金额"
				  align="center" show-overflow-tooltip
				  width="80"
		  >
			  <template #default="scope">{{scope.row.refundAmount === 0 ? '' : scope.row.refundAmount}}</template>
		  </el-table-column>
		  <el-table-column
				  label="保证金退款金额"
				  align="center" show-overflow-tooltip
				  width="80"
		  >
			  <template #default="scope">{{scope.row.depositAmount === 0 ? '' : scope.row.depositAmount}}</template>
		  </el-table-column>
		  <el-table-column
				  label="发货数量"
				  align="center" show-overflow-tooltip
				  prop="qty"
				  width="80"
		  />
		  <el-table-column
				  label="退货数量"
				  align="center" show-overflow-tooltip
				  width="80"
		  >
			  <template #default="scope">{{scope.row.returnQty === 0 ? '' : scope.row.returnQty}}</template>
		  </el-table-column>
		  <el-table-column
				  label="收款日期"
				  align="center" show-overflow-tooltip
				  prop="receiveDate"
				  width="80"
		  />
		  <el-table-column
				  label="退款日期"
				  align="center" show-overflow-tooltip
				  prop="refundDate"
				  width="140"
		  />
		  <el-table-column
				  label="自系统调账日期"
				  align="center" show-overflow-tooltip
				  prop="systemReconciliationDate"
				  width="140"
		  ></el-table-column>
		  <el-table-column
				  label="自系统调账数量"
				  align="center" show-overflow-tooltip
				  prop="systemReconciliationQty"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="自系统调账金额"
				  align="center" show-overflow-tooltip
				  prop="systemReconciliationAmount"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="财务调账日期"
				  align="center" show-overflow-tooltip
				  prop="reconciliationDate"
				  width="140"
		  ></el-table-column>
		  <el-table-column
				  label="财务调账数量"
				  align="center" show-overflow-tooltip
				  prop="reconciliationQty"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="财务调账金额"
				  align="center" show-overflow-tooltip
				  prop="reconciliationAmount"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="业务日期"
				  align="center" show-overflow-tooltip
				  prop="businessDate"
				  width="140"
		  ></el-table-column>
		  <el-table-column
				  label="单据编号"
				  align="center" show-overflow-tooltip
				  prop="orderNo"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="对账系统平台名称"
				  width="80"
				  align="center" show-overflow-tooltip
				  prop="secordSourceName"
		  />
		  <el-table-column
				  label="内部系统电商平台名称"
				  align="center" show-overflow-tooltip
				  prop="innerShopName"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="自有平台主订单号"
				  align="center" show-overflow-tooltip
				  prop="onwerPreformNo"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="PO单号"
				  align="center" show-overflow-tooltip
				  prop="poNo"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="入账主体"
				  align="center" show-overflow-tooltip
				  prop="receiveCompany"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="商品单价"
				  align="center" show-overflow-tooltip
				  prop="price"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="差异数量"
				  align="center" show-overflow-tooltip
				  prop="differenceQty"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="是否核销"
				  align="center" show-overflow-tooltip
				  prop="audit"
				  width="80"
		  ></el-table-column>
		  <el-table-column
				  label="异常售后未提报金额"
				  align="center" show-overflow-tooltip
				  prop="serviceBillAmount"
				  width="80"
		  >
			  <template #default="scope">
				  {{scope.row.serviceBillAmount === 0 ? '' : scope.row.serviceBillAmount}}
			  </template>
		  </el-table-column>
      </el-table>
    </el-card>
	  <!--客服登记表-->
	  <el-card class="box-card" style="margin-top:10px">
		  <template #header>
			  <div class="card-header">
				  <span>客服登记表</span>
			  </div>
		  </template>
		  <el-table
				  :data="clientRegisterList"
				  :header-row-style="{color: 'dimgray'}"
				  size="small"
				  :height="clientRegisterList && clientRegisterList.length ? 280 : 200"
				  border>
					<el-table-column label="日期" prop="registerDate" width="100" show-overflow-tooltip/>
					<el-table-column label="订单号" prop="orderNo" width="140" show-overflow-tooltip/>
					<el-table-column label="收货人" prop="receiver" width="130" show-overflow-tooltip/>
					<el-table-column label="支付方式" prop="payType" width="80" show-overflow-tooltip/>
					<el-table-column label="支付账户昵称" prop="payNickname" width="100" show-overflow-tooltip/>
					<el-table-column label="支付金额财务" prop="payAmount" width="100" show-overflow-tooltip/>
					<el-table-column label="收入金额财务" prop="receiveAmount" width="100" show-overflow-tooltip/>
					<el-table-column label="平台" prop="platform" width="80" show-overflow-tooltip/>
					<el-table-column label="交易标签" prop="tradeTag" width="150" show-overflow-tooltip/>
					<el-table-column label="原因" prop="reason" width="150" show-overflow-tooltip/>
					<el-table-column label="SKU" prop="sku" width="100" show-overflow-tooltip/>
					<el-table-column label="商品处理方式" prop="dealType" width="100" show-overflow-tooltip/>
					<el-table-column label="登记人" prop="registerUser" width="100" show-overflow-tooltip/>
					<el-table-column label="备注" prop="remark" width="100" show-overflow-tooltip/>
					<el-table-column label="其他" prop="other" width="100" show-overflow-tooltip/>
		  </el-table>
	  </el-card>
  </div>
</template>

<style lang="scss" scoped>
  .red{
    color: red;
  }
	.bold-text{
		font-weight: bold;
	}
</style>

